<div class="menu-management">
    <!-- 搜索栏 -->
    <div class="search-bar">
        <input type="text" 
               id="search-input" 
               placeholder="搜索菜单名称"
               hx-get="/admin/menu/search"
               hx-trigger="keyup changed delay:500ms"
               hx-target="#menu-list"
               hx-swap="innerHTML">
        <button class="btn-add" 
                hx-get="/admin/menu/add"
                hx-target="#menu-form-modal"
                hx-swap="innerHTML">
            新增菜单
        </button>
    </div>

    <!-- 菜单列表 -->
    <div id="menu-list" 
         hx-get="/admin/menu/list" 
         hx-trigger="load">
        加载中...
    </div>

    <!-- 新增/编辑菜单模态框 -->
    <div id="menu-form-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="form-content"></div>
        </div>
    </div>
</div>

<style>
    .menu-management {
        padding: 1rem;
    }

    .search-bar {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .search-bar input {
        flex: 1;
        padding: 0.5rem;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .btn-add {
        background-color: #673ab7;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        cursor: pointer;
    }

    .btn-add:hover {
        background-color: #7c4dff;
    }

    .menu-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 1rem;
    }

    .menu-table th,
    .menu-table td {
        padding: 0.75rem;
        border: 1px solid #ddd;
        text-align: left;
    }

    .menu-table th {
        background-color: #f5f5f5;
    }

    .action-buttons {
        display: flex;
        gap: 0.5rem;
    }

    .action-buttons button {
        padding: 0.25rem 0.5rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .btn-edit {
        background-color: #4caf50;
        color: white;
    }

    .btn-delete {
        background-color: #f44336;
        color: white;
    }

    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
    }

    .modal-content {
        background-color: white;
        margin: 10% auto;
        padding: 1rem;
        border-radius: 8px;
        width: 600px;
        position: relative;
    }

    .close {
        position: absolute;
        right: 1rem;
        top: 1rem;
        cursor: pointer;
        font-size: 1.5rem;
    }

    .close:hover {
        color: #666;
    }
</style>

<script>
    // 模态框控制
    const modals = document.querySelectorAll('.modal');
    const closeBtns = document.querySelectorAll('.close');

    // 打开模态框
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        if (evt.detail.target.id === 'menu-form-modal') {
            const modal = document.getElementById('menu-form-modal');
            modal.style.display = 'block';
        }
    });

    // 关闭模态框
    closeBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            modals.forEach(modal => modal.style.display = 'none');
        });
    });

    window.addEventListener('click', function(event) {
        modals.forEach(modal => {
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        });
    });

    // 处理表单提交
    document.body.addEventListener('htmx:afterRequest', function(evt) {
        if (evt.detail.requestConfig.path.includes('/admin/menu/save')) {
            if (evt.detail.successful) {
                document.getElementById('menu-form-modal').style.display = 'none';
                htmx.trigger('#menu-list', 'refresh');
            }
        }
    });

    // 刷新菜单列表
    document.body.addEventListener('htmx:afterRequest', function(evt) {
        if (evt.detail.requestConfig.path.includes('/admin/menu/delete')) {
            if (evt.detail.successful) {
                htmx.trigger('#menu-list', 'refresh');
            }
        }
    });
</script>
